<template>
  <div class="home-container">
    <common-header
      :user-name="userName"
      :current-route="$route.name"
      @component-change="handleComponentChange"
      @logout="handleLogout"
    />
    
    <router-view></router-view>
    
    <common-footer />
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader.vue'
import CommonFooter from '@/components/CommonFooter.vue'

export default {
  name: 'HomeView',
  components: {
    CommonHeader,
    CommonFooter
  },
  data() {
    return {
      userName: localStorage.getItem('userName') || '用户名'
    }
  },
  methods: {
    handleComponentChange(item) {
      const routeMap = {
        'HomeBanner': '/home',
        'Classroom': '/home/classroom',
        'Course': '/home/course',
        'LiveClasses': '/home/live',
        'ListInstructors': '/home/instructors',
        'StudyCentre': '/home/study'
      }
      this.$router.push(routeMap[item.component])
    },
    handleLogout() {
      this.$confirm('确认退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('userName')
        this.$router.push('/login')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  .router-view-container {
    flex: 1;
  }
}
</style> 